<template>
  <div class="search-goods">
    <i class="iconfont pr10" @click="searchGoods" style="border-right: 1px solid #DCDCDC;">&#xe61d;</i>
    <input class="f14" @click="searchGoods" placeholder="搜索更多商品"/>
    <i class="iconfont" style="color: #41B962">&#xe61b;</i>
    <p class="get-mount f16" @click="summaryList">汇总</p>
    <p class="delete f16" @click="deleteGood">删除</p>
  </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'search-goods',
        props: {
          deleteGoods: Array,
          allGoods: Array
        },
        methods: {
          searchGoods () {
              this.$router.push('search');
          },
          summaryList () {
            this.$router.push('/list');
          },
          deleteGood () {
            if (this.deleteGoods.length > 0) {
              this.deleteGoods.forEach(user => {
                this.allGoods.forEach(deleteUser => {
                  if (user.id === deleteUser.id && user.checked) {
                    this.allGoods.shift();
                    this.deleteGoods.shift();
                    this.$Message.success('删除商品成功！！');
                  } else if (user.id === deleteUser.id) {
                    this.deleteGoods.shift();
                    this.$Message.error('请选择需要删除的商品！');
                  }
                });
              });
              this.$emit('deleteAfter', this.allGoods);
            } else {
              this.$Message.error('请选择需要删除的商品！');
            }
          }
        }
    };
</script>

<style lang="stylus" scoped>
  .search-goods
    display flex; align-items center; height 40px; padding 0 13px;
    .search
      padding-right 15px; display inline-block; text-align center;font-size 20px;
    input
      flex 1; padding-left 15px; line-height 18px;
    .get-mount
       margin-left 4px; color #41B962;
    .delete
       margin-left 6px; color #F95318
</style>
